<template>
  <basic-dialog
    :title="title"
    :width="width"
    :visible="dialogVisible"
    :show-close="false"
  >
    <el-row>
      <h4 class="prompting-title">
        <i class="el-icon-warning"></i>
        <span>{{ content }}</span>
      </h4>
      <p class="code-content-wrap">{{ codeList }}</p>
    </el-row>
    <el-row slot="ft" type="flex" justify="end">
      <el-button
        id="copy-code-btn"
        type="text"
        @click="handleCopyCode"
      >复制代码</el-button
      >
      <el-button
        @click="handleCancel"
      >取消</el-button
      >
      <el-button
        type="primary"
        v-preventReClick
        @click="handleOk"
      >继续筛选</el-button
      >
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
export default {
  components: {
    BasicDialog
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    width: {
      type: String,
      default: '40%'
    },
    title: {
      type: String,
      default: '错误提醒'
    },
    content: {
      type: String,
      default: '未查到以下代码：'
    },
    codeList: {
      type: String,
      default: ''
    },
    handleCancel: {
      type: Function,
      default: () => {}
    },
    handleOk: {
      type: Function,
      default: () => {}
    },
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    }
  },
  methods: {
    handleCopyCode () {
      if (!this.codeList) {
        this.$message.warning('内容为空，不可复制');
        return false;
      }
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', this.codeList);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        this.$message.success('复制成功');
      } else {
        this.$message.warning('该浏览器不支持自动复制');
      }
      document.body.removeChild(input);
    }
  }
}
</script>
<style lang="less" scoped>
.prompting-title {
  color: #dd983e
}
</style>
